<template>
  <div class="advance-setting">
    <span
      class="config el-form-item__label"
      :style="{ ...setMargin, marginTop: '8px' }"
    >{{
      $demoi18n('panel.label.NoVal')
    }}</span>
    <el-popover
      placement="right"
      width="600"
      trigger="hover"
      :content="$demoi18n('panel.label.deScription')"
      :popper-class="`${xvueTheme}_bgColor`"
    >
      <template #reference>
        <el-button
          type="primary"
          @click="dialogFormVisible = true"
        >{{ $demoi18n('panel.label.conDes') }}</el-button>
      </template>
    </el-popover>
    <el-dialog
      v-model="dialogFormVisible"
      :title="$demoi18n('panel.label.NoVal')"
      :form="form_"
      :lock-scroll="false"
      :append-to-body="true"
      :class="`advanced-setting-dialog-custom ${visualThemeClassName} ${xvueNameSpace}`"
    >
      <PanelLabelOverflowTooltip ref="panelLabelOverflowTooltip" />
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        :form="form_"
        :model="form_"
      >
        <VsFormItem
          :label="$demoi18n('panel.label.setContents')"
          :label-width="formLabelWidth"
          prop="nullSet"
          :rules="genRulesByKey('nullSet')"
        >
          <el-input
            v-model="form_.nullSet"
            autocomplete="off"
          ></el-input>
        </VsFormItem>
      </el-form>
      <template #footer>
        <div
          class="dialog-footer"
        >
          <el-button @click="cancelForm()">{{ $demoi18n('panel.confirm.cancel') }}</el-button>
          <el-button
            type="primary"
            @click="submitForm()"
          >{{ $demoi18n('panel.confirm.ok') }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import { genRulesByKey } from '@/utils/rules';
export default {
  components: { PanelLabelOverflowTooltip },
  props: {
    form: {
      type: Object,
      default: () => ({
        nullSet: '0',
      }),
    },
    setMargin: {
      type: Object,
      default: () => ({ marginLeft: '17px', marginRight: '6px' }),
    },
  },
  data: () => ({
    xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
    xvueTheme: window._adoPremise.uc.theme,
    dialogFormVisible: false,
    formLabelWidth: '80px',
    visible: false,
    form_: {
      nullSet: '0',
    },
  }),
  created() {
    this.syncForm(this.form, this.form_);
  },
  methods: {
    genRulesByKey,
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    openDialog() {
      this.syncForm(this.form, this.form_);
      this.dialogFormVisible = true;
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }
        this.syncForm(this.form_, this.form);
        this.dialogFormVisible = false;
      });
    },
    cancelForm() {
      this.dialogFormVisible = false;
    },
    syncForm(srcForm, tarForm) {
      if (srcForm === this.form) {
        this.form_ = JSON.parse(JSON.stringify(this.form));
      } else {
        this.form.nullSet = this.form_.nullSet;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.advance-setting {
  display: flex;
  align-items: center;
  .config {
    display: inline-block;
  }
  .myBtn {
    background: rgba(64, 158, 255);
    color: #fff;
    line-height: 1.4;
    width: 92px;
    height: 35px;
    margin-bottom: 20px;
  }
  :deep(.el-dialog__title) {
    font-size: 14px;
  }
  .el-popover__reference {
    padding: 8px 20px;
  }
}
</style>
<style lang="less">
.advanced-setting-dialog-custom {
  .el-form-item__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.advance-setting {
  .el-form-item__label {
    min-width: 45px;
    max-width: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.dark_bgColor {
  background-color: #0d263a;
  color: #95c0dc;
  border-color: #0d263a;
  word-break: break-word;
  .popper__arrow {
    border-left-color: #0d263a !important;
    &::after {
      border-left-color: #0d263a !important;
    }
  }
}
.light_bgColor {
  background-color: #ffffff;
  color: #6c6c6c;
  border-color: #ffffff;
  word-break: break-word;
  .popper__arrow {
    border-left-color: #ebeef5 !important;
  }
}
</style>
